<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { getdocdetail, editDoc, getdirList } from '@/api/dashboard';
  import { FormInstance, Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { useUserStore } from '@/store';
  import {
    collectAllKeys,
    deepTree,
    transformDeptTreeSelect,
  } from '@/utils/utils';
  import { getToken } from '@/utils/auth';
  import ProForm from '@/components/pro-form/index.vue';
  import { omit } from 'lodash';
  import usePageStore from '@/store/modules/page';
  const formRef = ref<FormInstance | null>(null);
  const props = defineProps({
    visible: Boolean,
    params: Object,
  });
  const userStore = useUserStore();
  const treeData = ref([]); // 目录列表
  const pageStore = usePageStore();
  const formType = ref();
  const formData = ref({
    doc_name: '',
    doc_number: '',
    doc_type_id: '',
    doc_dir_id: '',
    doc_dept_id: '',
    doc_desc: '',
    doc_file: '',
  });
  watch(
    () => props.params,
    (newVal) => {
      if (newVal?.id) {
        getdocdetail({
          doc_id: newVal?.id,
        }).then((res) => {
          Object.assign(formData.value, res.data);
          formData.value.doc_file = [
            {
              uid: res.data.doc_id,
              name: res.data.doc_name,
              url: res.data.doc_file,
            },
          ];
          fetchData();
        });
      }
    },
    {
      deep: true,
      immediate: true,
    }
  );

  const { loading, setLoading } = useLoading();
  defineOptions({
    name: 'publicfileedit',
  });

  async function fetchData() {
    const res = await getdirList({ dir_type: pageStore.currentDirType });
    treeData.value = deepTree(
      'dir_name',
      res.data,
      'dir_id',
      'dir_id',
      'Files'
    );
    formType.value = [
      {
        name: 'doc_name',
        label: '文档名',
        type: 'a-input',
        fieldProps: {
          span: 24,
        },
        rules: [
          {
            message: '请输入',
            required: true,
          },
        ],
      },
      {
        name: 'doc_number',
        label: '文档编号',
        type: 'a-input',
        fieldProps: {
          span: 24,
        },
        rules: [
          {
            message: '请输入',
            required: true,
          },
        ],
      },
      {
        name: 'doc_type_id',
        label: '文档类型',
        type: 'a-select',
        selectOptions: userStore.allTypeFiles,
        fieldProps: {
          span: 24,
          fieldNames: { value: 'type_id', label: 'type_name' },
        },
        rules: [
          {
            message: '请选择',
            required: true,
          },
        ],
      },
      {
        name: 'doc_dir_id',
        label: '文档目录',
        type: 'a-tree-select',
        fieldProps: {
          span: 24,
          data: treeData.value ? treeData.value : [],
        },
        rules: [
          {
            message: '请选择',
            required: true,
          },
        ],
      },
      {
        name: 'doc_dept_id',
        label: '所属部门',
        type: 'a-tree-select',
        fieldProps: {
          span: 24,
          data: transformDeptTreeSelect(
            userStore.allDepts,
            'dept_id',
            'dept_id'
          ),
        },
        rules: [
          {
            message: '请选择',
            required: true,
          },
        ],
      },
      {
        name: 'doc_desc',
        label: '文档摘要',
        type: 'a-textarea',
        fieldProps: {
          span: 24,
        },
        rules: [
          {
            message: '请输入',
            required: false,
          },
        ],
      },
      {
        label: '文档附件',
        name: 'doc_file',
        type: 'a-upload',
        fieldProps: {
          span: 24,
          action: 'global/upload',
          multiple: false,
          limit: 1,
          maxCount: 1,
          connectionName: 'doc_name',
        },
        rules: [
          {
            message: '请选择文件',
            required: true,
          },
        ],
      },
    ];
  }

  const emit = defineEmits(['update:visible', 'refresh']);

  const handleSubmit = async () => {
    if (!(await formRef.value?.checkForm())) {
      try {
        loading.value = true;
        const fileUrl = formRef.value?.formModel.doc_file[0].url
          ? formRef.value?.formModel.doc_file[0].url
          : formRef.value?.formModel.doc_file[0].response[0];
        const res = await editDoc({
          ...omit(
            formRef.value?.formModel,
            'doc_type_name',
            'doc_dir_name',
            'doc_dept_name',
            'doc_dept_name',
            'doc_user_name',
            'doc_file_size',
            'doc_file_extension',
            'doc_lock',
            'doc_uid',
            'doc_lock_name'
          ),
          doc_file: fileUrl,
        });
        Message.success(res.msg);
        emit('update:visible', false);
        emit('refresh');
        setLoading(false);
      } catch (error) {
        setLoading(false);
      }
    }
  };
</script>

<template>
  <a-modal
    title="编辑文档"
    :visible="visible"
    @ok="handleSubmit"
    title-align="start"
    :ok-loading="loading"
    @cancel="
      () => {
        emit('update:visible', false);
      }
    "
  >
    <pro-form
      ref="formRef"
      hiddenBtn
      :form-json="formType"
      :form-data="formData"
    ></pro-form>
  </a-modal>
</template>

<style scoped lang="less">
  :deep(.arco-select-view-inner) {
    text-align: left !important;
  }
  .menu2 {
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    cursor: default !important;
    background: #f7f8fa;
  }
  :deep(.icon) {
    width: 1.2em !important;
    height: 1.2em !important;
  }

  :deep(.arco-tree-node-title-text) {
    font-size: 12px;
    width: 140px;
    overflow: hidden; /* 隐藏溢出内容 */
    white-space: nowrap; /* 禁止换行 */
    text-overflow: ellipsis; /* 显示省略号 */
  }

  :deep(.arco-tree-node-indent-block) {
    width: 0px !important;
  }

  :deep(.arco-tree-node-indent) {
  }
</style>
